<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page React Component | Framework7 React Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Page React Component | Framework7 React Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
                <li><a href="react-component-extensions.html">React Component Extensions</a></li>
                <li><a href="navigation-router.html">Navigation / Router</a></li>
                <li><a href="colors.html">Color Properties</a></li>
              </ul>
            </li>
            <li>
              <div class="title">React Components</div>
              <ul>
                <li><a href="app.html">App</a></li>
                <li><a href="accordion.html">Accordion</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icon.html">Icon</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-item.html">List Item</a></li>
                <li><a href="list-button.html">List Button</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable.html">Sortable</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="view.html">View</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Page React Component</h1>
          <ul class="docs-index"></ul>
          <p>Page in Framework7 has the same meaning as when you think about web pages. Page is the main component to display and operate content.</p>
          <p>Page React component represents Framework7's <a href="../docs/page.html">Page</a>.</p>
          <h2>Page Components</h2>
          <p>There are following components included:</p>
          <ul>
            <li><code><b>Page</b></code> / <code><b>F7Page</b></code> - main page element</li>
            <li><code><b>PageContent</b></code> / <code><b>F7PageContent</b></code> - additional inner page content element</li>
          </ul>
          <h2>Page Properties</h2>
          <table class="params-table">
            <thead>
              <tr>
                <th>Prop</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="4">&lt;Page&gt; properties</th>
              </tr>
              <tr>
                <td>name</td>
                <td>string</td>
                <td></td>
                <td>Page name</td>
              </tr>
              <tr>
                <td>stacked</td>
                <td>boolean</td>
                <td></td>
                <td>Enable for not currently active page if you use <code>stackedPages</code> Router parameter that keeps all pages in DOM</td>
              </tr>
              <tr>
                <td>messagesContent</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if you use <a href="messages.html">Messages</a> component inside to add required extra styling</td>
              </tr>
              <tr>
                <td>pageContent</td>
                <td>boolean</td>
                <td>true</td>
                <td>When enabled it automatically adds <code>page-content</code> element inside. Usefule to disable when you need to use few page-content elements for tabs</td>
              </tr>
              <tr>
                <td>tabs</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if you use Page as <a href="tabs.html">Tabs</a> wrapper</td>
              </tr>
              <tr>
                <td>loginScreen</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if you use <a href="login-screen.html">Login Screen</a> inside of the page to add required extra styling</td>
              </tr>
              <tr>
                <td>noSwipeback</td>
                <td>boolean</td>
                <td></td>
                <td>Disables swipeback feature for the current page (affects iOS theme only)</td>
              </tr>
              <tr>
                <td>withSubnavbar</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if you have Sub Navbar inside of the page</td>
              </tr>
              <tr>
                <td>noNavbar</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if you use common Navbar layout and need to hide common Navbar (or use another one) for this page (affects iOS theme only)</td>
              </tr>
              <tr>
                <td>noToolbar</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if you use common Toolbar/Tabbar layout and need to hide Toolbar (or use another one) for this page</td>
              </tr>
              <tr>
                <td>hideBarsOnScroll</td>
                <td>boolean</td>
                <td></td>
                <td>Hide Navbar & Toolbar on page scroll</td>
              </tr>
              <tr>
                <td>hideNavbarOnScroll</td>
                <td>boolean</td>
                <td></td>
                <td>Hide Navbar on page scroll</td>
              </tr>
              <tr>
                <td>hideToolbarOnScroll</td>
                <td>boolean</td>
                <td></td>
                <td>Hide Toolbar on page scroll</td>
              </tr>
              <tr>
                <td>ptr</td>
                <td>boolean</td>
                <td></td>
                <td>Enables <a href="../docs/pull-to-refresh.html">Pull To Refresh</a></td>
              </tr>
              <tr>
                <td>ptrDistance</td>
                <td>number</td>
                <td></td>
                <td>Custom pull to refresh trigger distance. By default (if not specified) it is 44px.</td>
              </tr>
              <tr>
                <td>ptrPreloader</td>
                <td>boolean</td>
                <td>true</td>
                <td>Disable if you want to use custom pull to refresh preloader element</td>
              </tr>
              <tr>
                <td>infinite</td>
                <td>boolean</td>
                <td></td>
                <td>Enables <a href="../docs/infinite-scroll.html">Infinite Scroll</a></td>
              </tr>
              <tr>
                <td>infiniteTop</td>
                <td>boolean</td>
                <td></td>
                <td>Enables infinite scroll on top of the page</td>
              </tr>
              <tr>
                <td>infiniteDistance</td>
                <td>boolean</td>
                <td>true</td>
                <td>Distance from the bottom of page (in px) to trigger infinite scroll event. By default (if not specified), it is 50 (px)</td>
              </tr>
              <tr>
                <td>infinitePreloader</td>
                <td>boolean</td>
                <td>true</td>
                <td>Disable if you want to use custom infinite-scroll preloader</td>
              </tr>
              <tr>
                <th colspan="4">&lt;PageContent&gt; properties</th>
              </tr>
              <tr>
                <td>tab</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if you use page-content as Tab</td>
              </tr>
              <tr>
                <td>tabActive</td>
                <td>boolean</td>
                <td></td>
                <td>Enable if the current tab is active</td>
              </tr>
              <tr>
                <td>
                  ptr<br> ptrDistance
<br> ptrPreloader
<br> infinite
<br> infiniteTop
<br> infiniteDistance
<br> infinitePreloader
<br> hideBarsOnScroll
<br> hideNavbarOnScroll
<br> hideToolbarOnScroll
<br> messagesContent
<br> loginScreen
                </td>
                <td></td>
                <td></td>
                <td>Same as <code>&lt;Page&gt;</code> properties</td>
              </tr>
            </tbody>
          </table>
          <h2>Page Events</h2>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="2">&lt;Page&gt; events</th>
              </tr>
              <tr>
                <td>pageMounted</td>
                <td>Event will be triggered when page with <code>keepAlive</code> route is mounted/attached to DOM</td>
              </tr>
              <tr>
                <td>pageInit</td>
                <td>Event will be triggered after Framework7 initialize required page's components and navbar</td>
              </tr>
              <tr>
                <td>pageReinit</td>
                <td>This event will be triggered in case of navigating to the page that was already initialized.</td>
              </tr>
              <tr>
                <td>pageBeforeIn</td>
                <td>Event will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)</td>
              </tr>
              <tr>
                <td>pageAfterIn</td>
                <td>Event will be triggered after page transitioned into view</td>
              </tr>
              <tr>
                <td>pageBeforeOut</td>
                <td>Event will be triggered right before page is going to be transitioned out of view</td>
              </tr>
              <tr>
                <td>pageAfterOut</td>
                <td>Event will be triggered after page transitioned out of view</td>
              </tr>
              <tr>
                <td>pageBeforeUnmount</td>
                <td>Event will be triggered when page with <code>keepAlive</code> route is going to be unmounted/detached from DOM</td>
              </tr>
              <tr>
                <td>pageBeforeRemove</td>
                <td>Event will be triggered right before Page will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory. This event won't be triggered for <code>keepAlive</code> routes.</td>
              </tr>
              <tr>
                <td>ptrPullStart</td>
                <td>Event will be triggered when you start to move pull to refresh content</td>
              </tr>
              <tr>
                <td>ptrPullMove</td>
                <td>Event will be triggered during you move pull to refresh content</td>
              </tr>
              <tr>
                <td>ptrPullEnd</td>
                <td>Event will be triggered when you release pull to refresh content</td>
              </tr>
              <tr>
                <td>ptrRefresh</td>
                <td>Event will be triggered when pull to refresh enters in "refreshing" state</td>
              </tr>
              <tr>
                <td>ptrDone</td>
                <td>Event will be triggered after pull to refresh is done and it is back to initial state (after calling <b>pullToRefreshDone</b> method)</td>
              </tr>
              <tr>
                <td>infinite</td>
                <td>Event will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom.</td>
              </tr>
              <tr>
                <th colspan="2">&lt;PageContent&gt; events</th>
              </tr>
              <tr>
                <td>tabShow</td>
                <td>Event will be triggered when Tab becomes visible/active</td>
              </tr>
              <tr>
                <td>tabHide</td>
                <td>Event will be triggered when Tab becomes hidden/inactive</td>
              </tr>
              <tr>
                <td>
                  ptrPullStart<br> ptrPullMove
                  <br> ptrPullEnd
                  <br> ptrEefresh
                  <br> ptrDone
                  <br> infinite
                </td>
                <td>Same as <code>&lt;Page&gt;</code> events</td>
              </tr>
            </tbody>
          </table>
          <h2>Page Slots</h2>
          <p>Page React component (<code>&lt;Page&gt;</code>) has additional slots for custom elements:</p>
          <ul>
            <li><code><b>default</b></code> - element will be inserted as a child of  "page-content", if <code>page-content</code> prop is enabled (by default)</li>
            <li><code><b>fixed</b></code> - element will be inserted as a direct child of "page" right before "page-content"</li>
          </ul><pre><code class="jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Page</span></span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fixed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Fixed element</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Page content goes here</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Page</span></span><span class="token punctuation">></span></span>

<span class="token punctuation">{</span><span class="token comment">/* Renders to: */</span><span class="token punctuation">}</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Fixed element</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Page content goes here</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code>
          <div class="with-device">
            <h2>Examples</h2>
            <h3 data-device-preview="../docs-demos/react/infinite-scroll.html">Infinite Scroll</h3><pre><code class="jsx"><span class="token keyword-block">export</span> <span class="token keyword-block">default</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> React<span class="token punctuation">.</span>Component <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token context">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
      items<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      allowInfinite<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      showPreloader<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Page</span></span>
        <span class="token attr-name">infinite</span>
        <span class="token attr-name">infiniteDistance</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">infinitePreloader</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>showPreloader<span class="token punctuation">}</span></span>
        <span class="token attr-name">onInfinite</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>loadMore<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token context">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Navbar</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Infinite Scroll<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Navbar</span></span><span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BlockTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">Scroll bottom</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">BlockTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List</span></span><span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ListItem</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Item </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">ListItem</span></span><span class="token punctuation">></span></span>
          <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">List</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Page</span></span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token function">loadMore</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>allowInfinite<span class="token punctuation">)</span> <span class="token keyword-block">return</span><span class="token punctuation">;</span>
    <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> allowInfinite<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>items<span class="token punctuation">;</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span>items<span class="token punctuation">.</span>length <span class="token operator">>=</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> showPreloader<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword-block">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">const</span> itemsLength <span class="token operator">=</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span>

      <span class="token keyword-block">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> <span class="token number">20</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>itemsLength <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        items<span class="token punctuation">,</span>
        allowInfinite<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></code>
            <h3 data-device-preview="../docs-demos/react/pull-to-refresh.html">Pull To Refresh</h3><pre><code class="jsx"><span class="token keyword-block">export</span> <span class="token keyword-block">default</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> React<span class="token punctuation">.</span>Component <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token context">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
      items<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          title<span class="token punctuation">:</span> <span class="token string">'Yellow Submarine'</span><span class="token punctuation">,</span>
          author<span class="token punctuation">:</span> <span class="token string">'Beatles'</span><span class="token punctuation">,</span>
          cover<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/88/88/abstract/1'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          title<span class="token punctuation">:</span> <span class="token string">'Don\'t Stop Me Now'</span><span class="token punctuation">,</span>
          author<span class="token punctuation">:</span> <span class="token string">'Queen'</span><span class="token punctuation">,</span>
          cover<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/88/88/abstract/2'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          title<span class="token punctuation">:</span> <span class="token string">'Billie Jean'</span><span class="token punctuation">,</span>
          author<span class="token punctuation">:</span> <span class="token string">'Michael Jackson'</span><span class="token punctuation">,</span>
          cover<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/88/88/abstract/3'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      songs<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Yellow Submarine'</span><span class="token punctuation">,</span> <span class="token string">'Don\'t Stop Me Now'</span><span class="token punctuation">,</span> <span class="token string">'Billie Jean'</span><span class="token punctuation">,</span> <span class="token string">'Californication'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      authors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Beatles'</span><span class="token punctuation">,</span> <span class="token string">'Queen'</span><span class="token punctuation">,</span> <span class="token string">'Michael Jackson'</span><span class="token punctuation">,</span> <span class="token string">'Red Hot Chili Peppers'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Page</span></span> <span class="token attr-name">ptr</span> <span class="token attr-name">onPtrRefresh</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>loadMore<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token context">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Navbar</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Pull To Refresh<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Navbar</span></span><span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List</span></span> <span class="token attr-name">mediaList</span><span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ListItem</span></span>
              <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span>
              <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>
              <span class="token attr-name">subtitle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>author<span class="token punctuation">}</span></span>
            <span class="token punctuation">></span></span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>cover<span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>44<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">ListItem</span></span><span class="token punctuation">></span></span>
          <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BlockFooter</span></span><span class="token punctuation">></span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Just pull page down to let the magic happen.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span><span class="token plain-text">Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">BlockFooter</span></span><span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">List</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Page</span></span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">loadMore</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> done</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> items<span class="token punctuation">,</span> songs<span class="token punctuation">,</span> authors <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
      <span class="token keyword">const</span> picURL <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://lorempixel.com/88/88/abstract/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> song <span class="token operator">=</span> songs<span class="token punctuation">[</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> songs<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> author <span class="token operator">=</span> authors<span class="token punctuation">[</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> authors<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> song<span class="token punctuation">,</span>
        author<span class="token punctuation">,</span>
        img<span class="token punctuation">:</span> picURL<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> items <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>